<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>模板语法</title>
    <script type="text/javascript" src="../../static/lib/vue/vue.js"></script>
</head>

<body>
<!--
    Vue模板语法有2大类：
        1.插值语法：
                功能：用于解析标签体内容
                写法：{{xxxx}},xxx会作为表达式去解析，且可以自动读取到data中的属性
        2.指令语法：
                功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）
                举例：v-bind:href="xxxxxx" 或  简写为:
                备注：Vue中有很多的指令，此处我们只是拿v-bind举个例子
    -->
<!-- 准备一个容器 -->
<div id="root">
    <h2>插值语法</h2>
    <h4>你好，{{msg}}</h4>
    <h4>你好，{{msg.toUpperCase()}}</h4>
    <hr />
    <h2>指令语法</h2>
    <a v-bind:href="url">点我去学习1</a>
    <a :href="url">点我去学习2</a>
    <a href="http://www.atguigu.com" :x="msg">点我去学习3</a>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            msg: 'atguigu',
            url: 'http://www.atguigu.com'
        }
    })
</script>
</body>

</html>